<!-- 创建任务 -->
<template>
    <div :class="['create-task', {'book-detail-bg':type==0}]">
        <div class="task-teacher" v-if="type==1">
            <div class="manage-btn" @click="canDelete=!canDelete">{{canDelete ? '完成' : '管理图书'}}</div>
            <!-- 教师端多本书 -->
            <ul class="book-list clearfix">
                <li class="left" v-for="(item,index) in taskList" :key="index">
                    <div class="book-box shadow1">
                        <img :src="item.bookCover" alt="">
                        <span class="delete-book" v-show="canDelete" @click="deleteBook(item,index)"></span>
                    </div>
                    <div class="name">{{item.bookName}}</div>
                </li>
                <!-- 添加按钮 -->
                <li class="left" v-show="taskList.length<4">
                    <div class="btn-add book-box shadow1" @click="openChoseBook()">添加新书</div>
                </li>
            </ul>
        </div>
        <div :class="['book-detail has-task-box',{'isteacher':type==1}]">
            <!-- 书本 -->
            <div class="has-task" v-if="type==0">
                <div class="book-box">
                    <div class="book-img shadow1"><img :src="book.bookCover" alt=""></div> 
                    <div class="book-title">{{book.bookName}}</div>
                    <div class="book-author">{{book.bookCountry}} · {{book.bookAuthor}}</div>
                </div> 
            </div>

            <!-- 选项 -->
            <div class="task-set">
                <div v-if="type==1">
                    <div class="set-item">任务模式</div>
                    <ul class="set-mode clearfix">
                        <li :class="['left',{'ischose':mode==0}]">
                            <span @click="mode=0">打卡模式</span>
                        </li>
                        <li :class="['left',{'ischose':mode==1}]">
                            <span @click="mode=1">考试模式</span>
                        </li>
                    </ul>
                </div>
                <div class="set-item">计划打卡天数</div>
                <ul class="set-day clearfix">
                    <li :class="['left',{'ischose':dayChose==index}]" v-for="(item,index) in dayList" :key="index">
                        <span @click="dayChose=index">{{item==0 ? '自定义' : item+'天'}}</span>
                    </li>
                    <transition name='fade'>
                    <li class="left end-day" v-show="type==1 && (dayChose == dayList.length-1)">
                        <span @click="openDayPicker()">{{taskEndDay ? taskEndDay:'请输入结束时间'}}</span>
                    </li>
                    </transition>
                </ul>
                <div v-show="mode==0">
                    <div class="set-item">每天阅读时长</div>
                    <ul class="set-time clearfix">
                        <li :class="['left',{'ischose':timeChose==index}]" v-for="(item,index) in timeList" :key="index">
                            <span @click="timeChose=index">{{item==0 ? '无限制' : item+'分钟'}}</span>
                        </li>
                    </ul>
                </div>
                <div class="set-item" v-if="type==1">选择班级</div>
                <ul class="set-class clearfix" v-if="type==1">
                    <li :class="['left',{'ischose':item.chose}]" v-for="(item,index) in classList" :key="index">
                        <span @click="choseClass(item)">{{item.name}}</span>
                    </li>
                </ul>
            </div>
        </div>
        <!-- 按钮 -->
        <div class="btn-box-main">
            <div class="btn-blue shadow2" @click="setTask()">确定</div>
        </div>
        <!-- 时间选择 -->
        <mt-datetime-picker
            ref="picker"
            type="date"
            year-format="{value} 年"
            month-format="{value} 月"
            date-format="{value} 日"
            :startDate="pickerStartDate"
            :endDate="pickerEndDate"
            v-model="pickerVal"
            @confirm="handleConfirm()">
        </mt-datetime-picker>
        <!-- 书本选择 -->
        <div class="mask chose-mask" v-show="choseBookShow">
            <transition name='slideup'>
                <div class="chose-box" v-show="choseBookShow">
                    <div class="chose-close" @click="choseBookShow=false"></div>
                    <div class="chose-list" @touchmove.stop>
                        <ul class="book-list clearfix">
                            <li class="left" v-for="(item,index) in bookList" :key="index">
                                <div class="book-box shadow1" @click="choseBookBtn(item,index)">
                                    <img :src="item.bookCover" alt="">
                                    <span :class="['chose-btn',{'ischose':item.isChose}]"></span>
                                </div>
                                <div class="name">{{item.bookName}}</div>
                            </li>
                        </ul>                        
                    </div>
                    <div class="btn-box-main">
                        <div class="btn-blue shadow2" @click="choseBookSure()">确定</div>
                    </div>
                </div>
            </transition>
        </div>
        <!-- 提示弹窗 -->
        <Popup v-show="popupShow" :popupShow="popupShow" :popupType="1" :popupText="popupText" :popupTips="popupTips"  @popupClose="popupShow=false"></Popup>
        
    </div>
</template>

<script>
import { axGet,axPost } from '@/api/index'
import Popup from '@/components/Popup'

export default {
    name: "createTask",
    components:{
        Popup,
    },
    data(){
        return{
            type:this.$parent.myInfo.UserType,//0学生，1教师
            mode:0,
            userid:this.$parent.myInfo.UserId,
            bookid:this.$route.query.bookid,
            book:{},                     //书本对象
            canDelete:false,             //管理图书
            taskList:[],                 //任务书本列表
            bookList:[],                 //选书列表
            choseBookShow:false,
            choseBookCount:0,
            dayList:[7,14,21],           //可选天数
            dayChose:0,
            timeList:[10,20,30,60],      //可选时间
            timeChose:0,
            taskEndDay:'',               //结束日期
            pickerShow:false,
            pickerVal:'',                //选择器时间
            pickerStartDate:new Date(),
            pickerEndDate:new Date(new Date().getTime()+119 * 1000 * 60 * 60 * 24),
            classList:this.$parent.myInfo.classJson?this.$parent.myInfo.classJson:[],  //可选班级
            canPost:true,
            //提示弹窗
            popupShow:false,
            popupText:'',
            popupTips:'',
        }
    },
    watch:{
        pickerShow(newVal,oldVal){
            if(newVal){
                touchFalse() 
            }else{
                touchTrue()
            }
        },
        choseBookShow(newVal,oldVal){
            if(newVal){
                touchFalse() 
            }else{
                touchTrue()
            }
        },
    },
    created(){
        this.$parent.menuShow=false; 
        
        /****** 验证登录 *****/ 
        if(!sessionStorage.getItem("myInfo")){
            this.$router.replace({path:'/',query: {}});
        }else{
            this.classList.forEach((item,i) => {
                this.$set(item,'chose', false)
            });
            this.book=JSON.parse(sessionStorage.getItem("thisBook"))
            this.taskList.push(this.book)
            
            if(this.type==1){
                this.dayList.push(0)
                this.timeList.push(0)
                this.getMyBookList()
            }
        }
    },
    mounted(){
        
    },
    destroyed(){
        this.$parent.scoreShow=false;
        touchTrue()
    },
    methods:{
        choseClass(item){
            item.chose=!item.chose
        },
        
        //书架请求
        getMyBookList(){
            axGet('GetMyHRBookList', {
                PageIndex: 1,
                PageSize:1000,
                userId:this.userid,
            }).then(res => {
                if(res.ResultCode==1){
                    let bookList=res.Value.list
                    let thisIndex = bookList.findIndex(item => item.bookInfo.bookId === this.bookid);
                    // let list={
                    //     bookInfo:this.book,
                    //     myState:0,
                    // }
                    if(thisIndex === -1){
                        let list=this.book
                        this.$set(list,'isChose',true)
                        this.bookList.push(list)
                    }
                    bookList.forEach((item,i)=>{
                        if(item.myState!=1){
                            this.$set(item.bookInfo,'isChose',false)
                            if(item.bookInfo.bookId==this.bookid){
                                item.bookInfo.isChose=true
                            }
                            this.bookList.push(item.bookInfo)
                        }
                    })
                }
            })
        },
        //创建任务
        setTask(){
            if(this.canPost){
                if(this.type==1 && this.classList.length==0){
                    this.popupText='您的账号下没有班级，无法创建任务'
                    this.popupTips=''
                    this.popupShow=true
                }else{
                    let day=this.dayList[this.dayChose]+''
                    let time=this.mode==1 ? 0 : (this.timeChose==4 ? -1: this.timeList[this.timeChose]+'')
                      console.log('this.mode',this.timeChose,this.mode,time)
                    let classCode=''
                    if(this.type==1){
                        this.classList.forEach((item,i)=>{
                            if(item.chose){
                                if(classCode){
                                    classCode=classCode+','+item.code
                                }else{
                                    classCode=item.code
                                }
                                
                            }
                        })
                    }
                    if(this.type==1 && classCode==''){
                        this.popupText='请选择班级'
                        this.popupTips=''
                        this.popupShow=true
                    }else if(this.type==1 && day==0){
                        this.popupText='请设置打卡任务的结束日期'
                        this.popupTips=''
                        this.popupShow=true
                    }else{
                        this.canPost=false;
                        this.postTask(day,time,classCode)
                    } 
                }
            }
        },
        // 提交任务
        postTask(day,time,classCode){
            let bookidStr=''
            this.taskList.forEach((item,i)=>{
                if(i==0){
                    bookidStr=item.bookId
                }else{
                    bookidStr=bookidStr+','+item.bookId
                }
            })
            console.log('day,time,classCode',day,time,classCode)
            axPost('SaveCheckInTask', {
                userId: this.userid,
                bookid: bookidStr,
                daycount:day,
                takeminute:time,
                calssCode:classCode
            }).then(res => {
                this.canPost=true;
                if(res.ResultCode==1 && res.Value){
                    let isPostScore=sessionStorage.getItem("postScore1")
                    if(isPostScore && isPostScore=='true' || this.type==1){
                        this.$router.go(-1)
                    }else{
                        this.$parent.postScore(20,1,'任务创建成功')
                    }
                }else{
                    this.$LayerTip({
                        content:"任务创建失败，请稍后再试",
                        time:1500,
                    });
                }
            })  
        },
        // 选择时间
        openDayPicker() {
            this.$refs.picker.open();
            this.pickerShow=true;
            this.pickerVal=new Date();
        },
        handleConfirm(){
            let year=this.pickerVal.getFullYear(); 
            let month=this.pickerVal.getMonth()+1;
            let date=this.pickerVal.getDate();
            let timeString=this.pickerVal.toTimeString().substring(0,5);
            this.taskEndDay=year+'年'+month+'月'+date+'日';
            let dayTimeJson=year+'-'+month+'-'+date+' '+timeString;
            this.dayList[this.dayList.length-1]=this.getCountDown(this.pickerVal)+1
            
            this.$refs.picker.close();
            this.pickerShow=false;
        },
        getCountDown (time) {
            let countTime = new Date(time).getTime()-new Date().getTime()
            let countday = Math.ceil(countTime / 1000 / 60 / 60 / 24)
            return countday
        },
        //弹窗
        popupClose(){
            this.popupShow=false
        },
        // 选择书本
        openChoseBook(){
            this.choseBookShow=true;
            this.bookList.forEach((item,i)=>{
                item.isChose=false
                this.taskList.forEach((task,j)=>{
                    if(item.bookId==task.bookId){
                        item.isChose=true
                    }
                })
            })
            this.choseBookCount=this.taskList.length
        },
        choseBookBtn(item,index){
            if(item.isChose){
                item.isChose=false
                this.choseBookCount--
                
            }else{
                if(this.choseBookCount<4){
                    item.isChose=!item.isChose
                    this.choseBookCount++
                }else{
                    this.$LayerTip({
                        content:"单次任务最多只能添加4本书哦",
                        time:1000,
                    });
                }
            }
            
        },
        choseBookSure(){
            let taskList=[]
            this.bookList.forEach((item,i)=>{
                if(item.isChose){
                    taskList.push(item)
                }
            })
            this.taskList=taskList;
            this.choseBookShow=false;
        },
        //删除书本
        deleteBook(item,index){
            if(this.taskList.length>1){
                this.taskList.splice(index,1)
            }else{
                this.popupText='单次任务至少要包含1本书哦'
                this.popupTips=''
                this.popupShow=true
            }
            
        }
    }
}
</script>
<style scoped>
.create-task{
    min-height: 100%;
    box-sizing: border-box;
}
.book-detail.isteacher{
    padding-top: 0;
}
.task-teacher{
    padding: 0.32rem 0 0.26rem 0.48rem;
    position: relative;
}
.manage-btn{
    position: absolute;
    top: 0.32rem;
    right: 0.32rem;
    line-height: 1;
    font-size: 0.28rem;
    color: #02affe;
    font-weight: bold;
}
.task-teacher .book-list li{
    padding: 0.5rem 0.24rem 0 0;
}
.task-teacher .book-list li .book-box{
    overflow: visible;
}
.delete-book{
    width: 0.4rem;
    height: 0.4rem;
    border: 0.04rem solid #fff;
    border-radius: 50%;
    position: absolute;
    top: -0.08rem;
    right: -0.08rem;
    background: #02affe url(~@/assets/img/icon/chal-false.png) no-repeat center center;
    background-size: auto 0.16rem; 
}

.task-book{
    padding: 0.4rem 0 0.4rem 0.38rem;
    border-radius: 0.3rem;
}
.task-book .book-img{
    width: 1.6rem;
    height: 2.14rem;
    border-radius: 0.2rem;
}
.task-book .book-info{
    height: auto;
}
.task-name{
    font-size: 0.36rem;
    line-height: 1;
    padding: 0.22rem 0;
    font-weight: bold;
    color: #000;
}
.task-book .author{
    padding-bottom: 0.28rem;
}
.task-set{
    color: #666;
    padding-bottom: 0.8rem;
}
.set-item{
    font-size: 0.28rem;
    color: #999;
    line-height: 1;
    padding-top: 0.5rem;
}
.task-set ul{
    padding-left: 0.06rem;
    /* display:-webkit-box;
    display:-webkit-flex;
    display: flex;
    -webkit-flex-wrap:wrap;
    flex-wrap:wrap;
    -webkit-justify-content: space-between;
	justify-content: space-between;*/
} 
.task-set li{
    padding: 0.3rem 0.09rem 0;
}
.task-set li span{
    display: block;
    height: 0.8rem;
    line-height: 0.8rem;
    font-size: 0.3rem;
    background: #eff1f3;
    text-align: center;
    border-radius: 0.44rem;
}
.set-mode li span{
    width: 2.8rem;
}
.set-day li span{
    width: 2.06rem;
}
.set-day li.end-day{
    width: calc(100% - 2.3rem);
    box-sizing: border-box;
} 
.set-day li.end-day span{
    width: 100%;
    color: #02affe;
    text-align: left;
    padding: 0 0.5rem 0 0.4rem;
    box-sizing: border-box;
    background: #e5f7ff url(~@/assets/img/icon/arrow-r-b.png) no-repeat right 0.3rem center;
    background-size: auto 0.22rem;
}
.set-time li span{
    width: 1.5rem;
}
.set-class li span{
    padding: 0 0.5rem;
}
.task-set li.ischose span{
    color: #fff;
    background: #02affe;
}

.chose-mask{
    padding-top: 1.3rem;
    box-sizing: border-box;
}
.chose-box{
    background: #fff;
    height: 100%;
    box-sizing: border-box;
    
    padding: 1.06rem 0 1.5rem 0.42rem;
    border-radius: 0.42rem 0.42rem 0 0;
    position: relative;
}
.chose-list{
    height: 100%;
    overflow: scroll;
}
.chose-close{
    width: 0.5rem;
    height: 0.5rem;
    background: url(~@/assets/img/icon/close.png) no-repeat 0 0;
    background-size: 100%;
    position: absolute;
    top: 0.32rem;
    right: 0.32rem;
}
.chose-btn{
    position: absolute;
    top: 0.2rem;
    right: 0.2rem;
    width: 0.44rem;
    height: 0.44rem;
    box-sizing: border-box;
    border: 1px solid #fff;
    border-radius: 50%;
    background: rgba(0,0,0,.3)
}
.chose-btn.ischose{
    border: 0;
    background: url(~@/assets/img/icon/clock-t.png) no-repeat 0 0;
    background-size: 100%;
}
</style>
